<template>
    <el-form :model="form" label-width="80px">
        <el-form-item label="回收清单">
            <el-input v-model="form.content" type="textarea" rows="10" />
        </el-form-item>
        <!-- 下拉框省市县区地址 -->
        <el-form-item label="地址" style="display: flex; flex-wrap: nowrap">
            <!-- 在一行展示 -->
            <el-cascader
                v-model="form.address"
                :options="options"
                :props="props"
                clearable
            />
            <el-input style="flex:1" v-model="form.detail_address" placeholder="详细地址" />
        </el-form-item>
        <el-form-item label="联系人" style="display: flex; flex-wrap: nowrap;">
            <el-input style="flex: 1;" v-model="form.contact" placeholder="请输入联系人姓名" />
            <el-input style="flex: 2;margin-left: 10px;" v-model="form.phone" placeholder="请输入联系人手机号"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即发布</el-button>
            <el-button @click="onCancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { regionData, codeToText } from "element-china-area-data";

const options = ref(regionData);
const props = ref({
    value: "value",
    label: "label",
    children: "children",
    lazy: true,
    lazyLoad(node, resolve) {
        const { level } = node;
        setTimeout(() => {
            resolve(node.children = level > 0 ? [] : regionData);
        }, 100);
    },
    checkStrictly: true,
    expandTrigger: "hover",
    filterable: true,
    valueKey: "value",
    changeOnSelect: true,
    defaultExpandAll: true,
    defaultExpandedKeys: ["110000", "110100", "110101"],
    defaultCheckedKeys: ["110101"],
    showCheckbox: true,
    emitPath: false,
    checkStrictly: true,
    clearable: true,
    filterable: true,
})
const form = ref({
    address: [],
    detail_address: '',
    content: '',
})
const onSubmit = () => {
    ElMessage({
        message: '发布成功',
        type: 'success',
    })
}
const onCancel = () => {
    ElMessage({
        message: '取消发布',
        type: 'warning',
    })
}
</script>

<style lang="scss" scoped>

</style>